<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('新增品质异常')"/>
    <link rel="stylesheet" th:href="@{/static/js/plugins/jquery-layout/jquery.layout-latest.css}">
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="form-group">
            <div class="col-sm-8" style="margin-left: 16px">
                <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
            </div>
        </div>
        <div class="col-sm-12" align="centre" style="margin-top: 10px">
            <form class="ibox-content form-horizontal" id="abnormalFrom">
                <div style="position: absolute;display: inline-block;right: 1%;top: 5px;"><span>表单编号: </span><input style="border: none;" name="formCode" readonly th:value="${#dates.format(#dates.createNow(),'yyyyMMddHHmmss')}"></div>
                <table border="1" style="width: 100%;text-align: center;font-size: 1.1em;margin-top: 15px; ">
                    <thead>
                        <tr>
                            <td><span class="required-sign">*</span>责任单位</td>
                            <td colspan="2"><input id="vendorCode" class="form-control" name="vendorCode" autocomplete="off" required></td>
                            <td><span class="required-sign">*</span>物料</td>
                            <td colspan="2"><input id="materialCode" class="form-control" name="materialCode" autocomplete="off" required></td>
                            <td>发文者</td>
                            <td><input class="form-control" name="submit" readonly th:value="${name}"></td>
                            <td>发文日期</td>
                            <td colspan="2"><input class="form-control" name="submitDate" readonly th:value="${#dates.format(#dates.createNow(),'yyyy-MM-dd')}"></td>
                        </tr>
                        <tr>
                            <td colspan="3"><input id="vendorName" class="form-control" name="vendorName" readonly required></td>
                            <td>物料描述</td>
                            <td colspan="3"><input id="materialDesc" class="form-control" name="materialDesc" readonly required></td>
                            <td><span class="required-sign">*</span>采购组</td>
                            <td colspan="3"><input class="form-control" name="cgz" autocomplete="off" required></td>
                        </tr>
                        <tr>
                            <td colspan="2">D2.问题点描述</td>
                            <td colspan="9"><textarea class="form-control" name="description" rows="5" maxlength="400" style="resize:none;" ></textarea></td>
                        </tr>
                        <tr>
                            <td colspan="2">附件</td>
                            <td colspan="9"><input  class="form-control" name="attach" type="file"></td>
                        </tr>
                        <tr>
                            <td><span class="required-sign">*</span>收货日期</td>
                            <td>采购凭证</td>
                            <td>供应商批次</td>
                            <td>厚声批次</td>
                            <td><span class="required-sign">*</span>缺陷项目</td>
                            <td><span class="required-sign">*</span>缺陷分类</td>
                            <td><span class="required-sign">*</span>不良率</td>
                            <td><span class="required-sign">*</span>不良数量</td>
                            <td><span class="required-sign">*</span>进料数量</td>
                            <td><span class="required-sign">*</span>厚声处理要求</td>
                            <td>备注</td>
                        </tr>
                        <tr>
                            <td><input id="receiveDate" class="form-control" name="receiveDate" autocomplete="off" required></td>
                            <td><input class="form-control" name="purchaseVoucher" maxlength="20" autocomplete="off" ></td>
                            <td><input class="form-control" name="vendorBatch" maxlength="20" autocomplete="off" ></td>
                            <td><input class="form-control" name="hsBatch" maxlength="20" autocomplete="off" ></td>
                            <td><input class="form-control" name="defectiveItem" maxlength="50" autocomplete="off" required></td>
                            <td><input class="form-control" name="detectiveSort" maxlength="50" autocomplete="off" required></td>
                            <td><input class="form-control" name="defectRate" maxlength="10" autocomplete="off" required></td>
                            <td><input class="form-control" name="defectNumber" maxlength="10" autocomplete="off" required></td>
                            <td><input class="form-control" name="feedNumber" maxlength="10" autocomplete="off" required></td>
                            <td><input class="form-control" name="processDemand" maxlength="100" autocomplete="off" required></td>
                            <td><input class="form-control" name="remark" maxlength="300" autocomplete="off"></td>
                        </tr>
                        <tr>
                            <td>要求</td>
                            <td colspan="10"><input class="form-control" name="require" maxlength="300" autocomplete="off"></td>
                        </tr>
                    </thead>
                </table>
            </form>
        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<script type="text/javascript">

    $(function () {
        // 初始化时间插件
        laydate.render({elem: '#receiveDate'});
    })

    //根据vendorCode查vendorName
    $("#vendorCode").change(function () {
        let vendorCode=$(this).val();
        $.ajax({
            url: ctxPath + "/vendor/findById/"+vendorCode,
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                if (data.result) {
                    $("#vendorName").val(data.result.vendorName);
                } else {
                    Dialog.errorMsg("不存在该供应商，请确认!");
                }
            }
        });
    });

    //根据materialCode查materialDesc
    $("#materialCode").change(function () {
        let materialCode=$(this).val();
        $.ajax({
            url: ctxPath + "/material/getMaterialByCode",
            data: {"materialCode":materialCode},
            dataType: 'JSON',
            success: function (data) {
                if (data.result) {
                    $("#materialDesc").val(data.result.materialDesc);
                } else {
                    Dialog.errorMsg("不存在该物料，请确认!");
                }
            }
        });
    });

    //保存提交的数据
    function save(){
        if($("#abnormalFrom").valid()) {

            //收货日期不能晚于今天
            var contractDate=new Date($("#receiveDate").val());
            if(contractDate>new Date()){
                Dialog.errorMsg("收货日期不能晚于今天！");
                return ;
            }

            var formData = new FormData($('#abnormalFrom')[0]);
            layer.load(1, {shade: [0.3, '#393D49']});
            $.ajax({
                url: ctxPath + "/abnormalQuality/addAbnormal",
                type: 'POST',
                data: formData,
                dataType: 'JSON',
                cache: false,
                processData: false,
                contentType: false,
                success: function (data) {
                    layer.closeAll();
                    if (data.code==0) {
                        Dialog.msg("操作成功!");
                        parent.refresh();
                        Dialog.closeFrame(window.name);
                    } else {
                        Dialog.errorMsg("操作失败，请重试!");
                    }
                }
            });
        }
    }
</script>

</body>
</html>